<template>
  <ProTable
    class-name="no-card customTable"
    ref="proTable"
    :columns="tables.column"
    :request-api="isApi ? props.tables.data : undefined"
    :data="isApi ? undefined : props.tables.data"
    :init-param="initParam"
    :pagination="true"
    :border="false"
    :tool-button="false"
    :cell-class-name="tableColClassName"
    @row-click="rowClick"
    :key="tables.column"
  >
    <!-- 表格操作 -->
    <template #operation="scope">
      <el-button type="primary" class="scope-button" link :icon="Phone" @click="openDrawer('【ivr外呼+短信】督办', scope.row)">
        ivr+短信
      </el-button>
      <el-button type="primary" class="scope-button" link :icon="Promotion" @click="openDrawer('工单督办', scope.row)">
        工单督办
      </el-button>
    </template>
  </ProTable>
  <DrawerPage ref="drawerRef" />
</template>

<script setup lang="tsx">
import { reactive, ref, computed } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import { Phone, Promotion } from "@element-plus/icons-vue";
import DrawerPage from "@/views/datascreenV2/components/DrawerPage.vue";
import { SendIvrApi } from "@/api/modules/ivr";

// ProTable 实例
const proTable = ref<ProTableInstance>();
// const emit = defineEmits(["clickEvent"]);
const initParam = reactive({ departmentId: "" });

const props = withDefaults(defineProps<{ tables: any }>(), { tables: () => [] });
const isApi = computed(() => {
  return typeof props.tables.data !== "object";
});
// 表格配置项
// const columns = reactive<ColumnProps<any>[]>(props.tables.column);
// const columns = reactive<ColumnProps<any>[]>([
//   { prop: "组长", label: "组长" },
//   { prop: "工作内容", label: "工作内容", showOverflowTooltip: false },
//   { prop: "三季度", label: "三季度", showOverflowTooltip: false },
//   { prop: "评分权重", label: "评分权重" },
//   { prop: "当前进度", label: "当前进度" },
//   { prop: "全省排名", label: "全省排名" },
//   { prop: "全省第一", label: "全省第一" },
//   { prop: "得分", label: "得分" },
//   { prop: "失分", label: "失分" },
//   { prop: "operation", label: "操作", fixed: "right", width: 200 }
// ]);
// columns;
// 单击行
const rowClick = (row: any, column: TableColumnCtx<any>) => {
  // console.log(row, column);
  if (column.label === "操作") return;
  // emit("clickEvent", "", "");
  column;
};

// 标注背景颜色
const tableColClassName = ({ column, row }: { column: any; columnIndex: number; row: any; rowIndex: number }) => {
  if (column.label === "组长") return "default-row";
  if (column.label === "评分权重" || column.label === "全省排名") return "success-row";
  if (column.label === "四级指标" || column.label === "10月") {
    if (row.Not_benchmark === 1) return "warning-row";
    if (row.Not_challenges === 1) return "info-row";
  }
  return "white-text";
  // console.log(column);
  // return column.color;
  row;
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof DrawerPage> | null>(null);
const openDrawer = (title: string, row: Partial<any> = {}) => {
  const params = {
    title,
    isView: false,
    row: { ...row },
    api: title === "【ivr外呼+短信】督办" ? SendIvrApi : undefined,
    getTableList: proTable.value?.getTableList
  };
  console.log(drawerRef.value);
  drawerRef.value?.acceptParams(params);
};
</script>

<style lang="scss" scoped>
// .el-button--primary {
//   --el-button-text-color: #ffffff;
// }
.scope-button {
  color: aqua;
}
</style>
